<template>
  <ul class="nav-box">
    <li @click="handleClick(1)">首页</li>
    <li @click="handleClick('last')">上一页</li>
    <li
      v-for="item in listData"
      :key="item"
      @click="handleClick(item)"
      :class="item == page ? 'actived' : ''"
    >
      {{ item }}
    </li>
    <li @click="handleClick('next')">下一页</li>
    <li @click="handleClick(totalPage)">尾页</li>
  </ul>
</template>

<script>
export default {
  props: {
    // 分页参数，page&totalPage
    page: {
      type: Number,
      default: 1,
    },
    // 分页参数：总页数
    totalPage: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    handleClick(v) {
      let page = this.page;
      if ("last" == v) {
        if (page == 1) {
          return;
        }
        page--;
        this.$emit("page", page);
      } else if ("next" == v) {
        // 当前也已经是最大页数
        if (page == this.totalPage) {
          return;
        }
        page++;
        this.$emit("page",page);
      } else {
        page = v;
        this.$emit("page", page);
      }
    },
  },
  computed: {
    listData() {
        // console.log("this.page = ",this.page);
      const arr = [];
      let page = this.page;
      let totalPage = this.totalPage;
      // 右侧补的参数
      if (page <= 3) {
        for (let i = 1; i < page; i++) {
          arr.push(i);
        }
      } else {
        for (let i = page - 3; i < page; i++) {
          arr.push(i);
        }
      }
      arr.push(page);
      for (let i = arr.length; i < 7; i++) {
        if (page == totalPage) {
          break;
        }
        page++;
        arr.push(page);
      }
      return arr;
    },
  },
};
</script>

<style scoped>
.nav-box {
  display: flex;
  justify-content: center;
}

.nav-box > li {
  background-color: #ccc;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.nav-box > .actived {
  color: #f00;
}

.nav-box > li:hover {
  background-color: var(--base-color);
}
</style>